<template>
  <div class="trackingpool-custom">
    <header>
      <span>自定义跟踪</span><atom-icon name="close" class="close" @click.stop="onCloseClick" />
    </header>
    <div class="body">
      <div class="block">
        <div class="title-wrap">
          <span class="title">选择提醒内容</span>
          <atom-radio-group
            :value="noticeWay"
            @input="$emit('updateNoticeWay', $event)"
            direction="horizontal"
          >
            <atom-radio v-for="item in noticeWayArr" :key="item.key" :name="item.key">{{
              item.value
            }}</atom-radio>
          </atom-radio-group>
        </div>
        <div class="title-wrap"><span class="title">跟踪条件设置</span></div>
        <div class="contents">
          <StepperInput
            v-for="item in stepperData"
            :key="item.key"
            :title="item.name"
            :min="item.min"
            :max="item.max"
            :canInput="false"
            :value="item.value"
            @input="$emit('updateCustomData', { key: item.key, value: $event })"
          />
          <PopupInput
            v-for="item in pullDownData"
            :key="item.key"
            :title="item.name"
            :options="item.options"
            @show="$emit('show')"
            @hidden="$emit('hidden')"
            :value="item.value"
            @input="$emit('updateCustomData', { key: item.key, value: $event })"
          />
        </div>
      </div>
    </div>
    <div class="button-wrap">
      <div class="button" @click.stop="confirm"><span>确定</span></div>
    </div>
  </div>
</template>

<script>
import StepperInput from '@/components/detail/trackingPoolCustom/StepperInput.vue';
import PopupInput from '@/components/detail/trackingPoolCustom/PopupInput.vue';
import { reqSaveTrakPoolCustom } from '@/apis/portfolio.api.js';
import '@atom/atom-icons/icons/close';
import tools from '@/lib/tools.js';
export default {
  components: {
    StepperInput,
    PopupInput,
  },
  props: {
    stepperData: {
      type: Array,
      default: () => [],
    },
    pullDownData: {
      type: Array,
      default: () => [],
    },
    noticeWay: {
      type: 'ORIGINAL' | 'TRACKING',
      default: 'ORIGINAL',
    },
    needSub: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      noticeWayArr: [
        { key: 'ORIGINAL', value: '精选股票池' },
        { key: 'TRACKING', value: '自定义跟踪' },
      ],
    };
  },
  methods: {
    // 点击关闭设置订阅池弹窗
    onCloseClick() {
      this.$emit('closePopup');
      this.$emit('updateTrackPoolData');
    },
    isValid() {
      const isStepperError = this.stepperData.find(item => {
        if (item.value < item.min || item.value > item.max) {
          return true;
        }
      });
      const isPullDownError = this.pullDownData.find(item => {
        if (item.options.find(i => i.value === item.value)) {
          return true;
        }
      });
      if (isStepperError || isPullDownError) {
        tools.errorReport({
          name: `TrackPoolCustom.vue的isValid方法出现错误。`,
          message: `错误内容是${JSON.stringify(isStepperError)}或者是${JSON.stringify(
            isPullDownError
          )}`,
          stack: '',
        });
        return false;
      }
      return true;
    },
    async confirm() {
      // 验证数据是否有误
      if (!this.isValid()) {
        this.$toast('数据异常，请检查输入是否正确！');
      }
      const params = { portfolio_id: window.getParam('portfolio_id') };
      try {
        const NUM10 = 10;
        [...this.stepperData, ...this.pullDownData].forEach(item => {
          params[item.key] = parseFloat(item.value, NUM10);
        });
        params.subscribe_type = this.noticeWay;
        const res = await reqSaveTrakPoolCustom(params);
        if (res.status_code) {
          this.$toast('数据异常，请稍后重试！');
          throw new Error(
            `trackingPoolCustom的index.vue组件的reqSaveTrakPoolCustom接口status_code异常:${
              res.status_code
            }，参数为${JSON.stringify(params)}，响应为${JSON.stringify(res)}`
          );
        }
        this.$toast('定制成功！');
        // 成功之后关闭弹框
        this.$emit('closePopup');
        // 打开订阅弹框
        if (this.needSub) {
          this.$emit('openSubPopup');
        }
        // 触发事件通知父组件重新调用接口
        this.$emit('updateTrackPoolData');
      } catch (error) {
        _t.errorReport({
          name: `servicePack/TrackPoolCustom.vue的confirm错误。${error.name}`,
          message: `入参为${JSON.stringify(params)}。${error.message}`,
          stack: error.stack,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
[data-adapter='thsIphoneXAdapter'] {
  .button-wrap {
    padding-bottom: 42px !important;
  }
}

.trackingpool-custom {
  display: flex;
  height: 100%;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-color-2);
  header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 64px;
    background-color: var(--bg-color-2);
    flex-shrink: 0;
    span {
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: var(--text-1);
      text-align: center;
      line-height: 22px;
      font-weight: 500;
    }
    .close {
      position: absolute;
      width: 18px;
      height: 18px;
      right: 21px;
      color: var(--text-1);
    }
  }
  .body {
    box-sizing: border-box;
    padding: 8px 16px;
    flex-grow: 1;
    overflow-y: scroll;
    margin-bottom: 76px;
    font-size: 16px;

    .block {
      &:not(:first-child) {
        margin-top: 20px;
      }
      .title-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 2px;
        font-size: 16px;
        &:not(:first-child) {
          margin-top: 16px;
        }

        .title {
          position: relative;
          width: fit-content;
          font-family: PingFangSC-Semibold;
          font-size: 16px;
          color: var(--text-1);
          line-height: 16px;
          font-weight: 600;
          margin-right: 16px;

          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 6px;
            opacity: 0.2;
            background-image: linear-gradient(
              270deg,
              rgba(255, 74, 102, 0) 0%,
              rgba(255, 36, 54, 0.6) 100%
            );
            border-radius: 1px;
          }
        }
        .sub-title {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: var(--text-3);
          line-height: 18px;
          font-weight: 400;
        }
      }
    }
  }
  .button-wrap {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 44px;
    padding: 8px 16px;
    background-color: var(--bg-color-2);
    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 343px;
      height: 44px;
      background: var(--atom-color-brand-primary);
      border-radius: 4px;
      span {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        font-weight: 400;
      }
    }
  }
}
</style>
